<template>
<q-page class="q-pa-md row justify-center">

    <div style="max-width:595px;min-width:200px" class="col-grow" >
      <q-card v-for="item in quoteInfoList" :key="item.qi_id" style="border-radius:10px" class="shadow-12">

        <q-expansion-item default-opened header-class="q-pa-none" class="q-pa-none">
            <template v-slot:header>
                <div class="column full-width q-pt-sm">
                    <div class="q-px-md full-width row items-center justify-between">
                        <div class="row items-center justify-between no-wrap">
                            <q-img v-if="item.isCommercial==1" src="~assets/icons/commercial.png" contain style="width:25px"></q-img>
                            <q-img v-if="item.isCommercial!=1" src="~assets/icons/uncommercial.png" contain style="width:25px"></q-img>
                            <div class="text-teal-6 q-ma-sm text-h6 text-bold">{{item.name}}</div>

                        </div>

                    </div>

                    <div class="q-px-md q-pl-lg q-py-sm full-width row items-center wrap ">

                        <!-- <q-badge v-if="item.isCommercial==1" outline color="green" label="可商用" />
                        <q-badge v-if="item.isCommercial!=1" outline color="grey-6" label="非商用" /> -->

                        <q-badge class="q-ml-sm text-bold" outline color="amber" :label="item.resolution" />
                        <q-badge class="q-ml-sm" outline color="amber" :label="item.aspectRatio" />
                        <div class="row items-center q-ml-sm">
                            <q-icon name="mdi-clock-time-twelve-outline" color="amber"></q-icon>
                            <span class="text-caption  q-ml-xs">时长：{{item.duration}}</span>
                        </div>
                    </div>
                    <div class="q-px-md q-pl-lg q-py-sm full-width row items-center wrap ">

                      <q-badge class="q-ml-sm" outline color="primary" :label="item.typename" />
                      <div class="row items-center q-ml-sm">
                          <q-icon name="mdi-clock-time-twelve-outline" color="teal-6"></q-icon>
                          <span class="text-caption q-ml-xs ">项目周期：{{stime}}-{{etime}}</span>
                      </div>
                  </div>

                </div>

            </template>
            <q-card class=" " style="border-radius:10px">
                <q-card-section class="q-py-sm">
                    <q-expansion-item  header-class="q-pa-none" class="q-pa-none">
                        <template v-slot:header>
                            <tips-title class="full-width" title="前期制作" :isCaption="true" :capTitle="'合计：￥'+item.preTotal+'.00'" capClass="text-amber-6 text-bold" tipclass="bg-amber-6" lineColor="amber"></tips-title>
                        </template>
                        <q-card class="q-px-sm">
                            <q-list bordered class="rounded-borders">
                                <q-expansion-item :disable="!item.CJ_remark.length>0">
                                    <template v-slot:header>

                                        <q-item-section>
                                            策划及脚本
                                        </q-item-section>

                                        <q-item-section side>
                                            {{ item.CJ }}.00
                                        </q-item-section>
                                    </template>

                                    <q-card>


                                        <q-card-section class="q-pt-none  row wrap ">
                                          <div class="q-pa-sm bg-blue-1 full-width text-caption text-weight-light row text-wrap" style="border-radius:10px;">

                                                <div style="max-width:250px;white-space:pre-line">
                                                  {{ item.CJ_remark }}
                                                </div>


                                          </div>
                                      </q-card-section>
                                    </q-card>
                                </q-expansion-item>

                                <q-separator inset />
                                <q-expansion-item :disable="!item.SR_remark.length>0">
                                    <template v-slot:header>

                                        <q-item-section>
                                            摄制人员费
                                        </q-item-section>

                                        <q-item-section side>
                                            {{ item.SR }}.00
                                        </q-item-section>
                                    </template>

                                    <q-card>
                                        <q-card-section class="q-pt-none  row wrap ">
                                            <div class="q-pa-sm bg-blue-1 full-width text-caption text-weight-light row text-wrap" style="border-radius:10px;">

                                                  <span style="max-width:250px;white-space:pre-line">
                                                    {{ item.SR_remark }}
                                                  </span>


                                            </div>
                                        </q-card-section>
                                    </q-card>
                                </q-expansion-item>

                                <q-separator inset />
                                <q-expansion-item :disable="!item.QD_remark.length>0">
                                    <template v-slot:header>

                                        <q-item-section>
                                            器材灯光费
                                        </q-item-section>

                                        <q-item-section side>
                                            {{ item.QD }}.00
                                        </q-item-section>
                                    </template>

                                    <q-card>

                                        <q-card-section class="q-pt-none  row wrap ">
                                          <div class="q-pa-sm bg-blue-1 full-width text-caption text-weight-light row text-wrap" style="border-radius:10px;">

                                                <div style="max-width:250px;white-space:pre-line">
                                                  {{ item.QD_remark }}
                                                </div>


                                          </div>
                                      </q-card-section>
                                    </q-card>
                                </q-expansion-item>

                                <q-separator inset />
                                <q-expansion-item :disable="!item.CZ_remark.length>0">
                                    <template v-slot:header>

                                        <q-item-section>
                                            场地置景费
                                        </q-item-section>

                                        <q-item-section side>
                                            {{ item.CZ }}.00
                                        </q-item-section>
                                    </template>

                                    <q-card>
                                      <q-card-section class="q-pt-none  row wrap ">
                                        <div class="q-pa-sm bg-blue-1 full-width text-caption text-weight-light row text-wrap" style="border-radius:10px;">

                                              <div style="max-width:250px;white-space:pre-line">
                                                {{ item.CZ_remark }}
                                              </div>


                                        </div>
                                    </q-card-section>

                                    </q-card>
                                </q-expansion-item>

                                <q-separator inset />
                                <q-expansion-item :disable="!item.YD_remark.length>0">
                                    <template v-slot:header>

                                        <q-item-section>
                                            演员道具费
                                        </q-item-section>

                                        <q-item-section side>
                                            {{ item.YD }}.00
                                        </q-item-section>
                                    </template>

                                    <q-card>
                                      <q-card-section class="q-pt-none  row wrap ">
                                        <div class="q-pa-sm bg-blue-1 full-width text-caption text-weight-light row text-wrap" style="border-radius:10px;">

                                              <div style="max-width:250px;white-space:pre-line">
                                                {{ item.YD_remark }}
                                              </div>


                                        </div>
                                    </q-card-section>

                                    </q-card>
                                </q-expansion-item>

                                <q-separator inset />
                                <q-expansion-item :disable="!item.FZ_remark.length>0">
                                    <template v-slot:header>

                                        <q-item-section>
                                            服装造型费
                                        </q-item-section>

                                        <q-item-section side>
                                            {{ item.FZ }}.00
                                        </q-item-section>
                                    </template>

                                    <q-card>
                                      <q-card-section class="q-pt-none  row wrap ">
                                        <div class="q-pa-sm bg-blue-1 full-width text-caption text-weight-light row text-wrap" style="border-radius:10px;">

                                              <div style="max-width:250px;white-space:pre-line">
                                                {{ item.FZ_remark }}
                                              </div>


                                        </div>
                                    </q-card-section>

                                    </q-card>
                                </q-expansion-item>
                                <q-separator inset />
                            </q-list>
                        </q-card>
                    </q-expansion-item>

                </q-card-section>
                <q-card-section class="q-py-sm">
                    <q-expansion-item  header-class="q-pa-none" class="q-pa-none">
                        <template v-slot:header>
                            <tips-title class="full-width" title="后期制作" tipclass="bg-blue-6" lineColor="blue" :isCaption="true" :capTitle="'合计：￥ '+item.postTotal+'.00'" capClass="text-blue-6 text-bold"></tips-title>
                        </template>
                        <q-card class=" q-px-sm">
                            <q-expansion-item :disable="!item.JJ_remark.length>0">
                                <template v-slot:header>

                                    <q-item-section>
                                        剪辑
                                    </q-item-section>

                                    <q-item-section side>
                                        {{ item.JJ }}.00
                                    </q-item-section>
                                </template>

                                <q-card>
                                  <q-card-section class="q-pt-none  row wrap ">
                                    <div class="q-pa-sm bg-blue-1 full-width text-caption text-weight-light row text-wrap" style="border-radius:10px;">

                                          <div style="max-width:250px;white-space:pre-line">
                                            {{ item.JJ_remark }}
                                          </div>


                                    </div>
                                </q-card-section>

                                </q-card>
                            </q-expansion-item>
                            <q-separator inset />
                            <q-expansion-item :disable="!item.TS_remark.length>0">
                                <template v-slot:header>

                                    <q-item-section>
                                        调色
                                    </q-item-section>

                                    <q-item-section side>
                                        {{ item.TS }}.00
                                    </q-item-section>
                                </template>

                                <q-card>
                                  <q-card-section class="q-pt-none  row wrap ">
                                    <div class="q-pa-sm bg-blue-1 full-width text-caption text-weight-light row text-wrap" style="border-radius:10px;">

                                          <div style="max-width:250px;white-space:pre-line">
                                            {{ item.TS_remark }}
                                          </div>


                                    </div>
                                </q-card-section>

                                </q-card>
                            </q-expansion-item>
                            <q-separator inset />
                            <q-expansion-item :disable="!item.YS_remark.length>0">
                                <template v-slot:header>

                                    <q-item-section>
                                        声音设计
                                    </q-item-section>

                                    <q-item-section side>
                                        {{ item.YS }}.00
                                    </q-item-section>
                                </template>

                                <q-card>
                                  <q-card-section class="q-pt-none  row wrap ">
                                    <div class="q-pa-sm bg-blue-1 full-width text-caption text-weight-light row text-wrap" style="border-radius:10px;">

                                          <div style="max-width:250px;white-space:pre-line">
                                            {{ item.YS_remark }}
                                          </div>


                                    </div>
                                </q-card-section>

                                </q-card>
                            </q-expansion-item>
                            <q-separator inset />
                            <q-expansion-item :disable="!item.SB_remark.length>0">
                                <template v-slot:header>

                                    <q-item-section>
                                        视觉包装
                                    </q-item-section>

                                    <q-item-section side>
                                        {{ item.SB }}.00
                                    </q-item-section>
                                </template>

                                <q-card>
                                  <q-card-section class="q-pt-none  row wrap ">
                                    <div class="q-pa-sm bg-blue-1 full-width text-caption text-weight-light row text-wrap" style="border-radius:10px;">

                                          <div style="max-width:250px;white-space:pre-line">
                                            {{ item.SB_remark }}
                                          </div>


                                    </div>
                                </q-card-section>

                                </q-card>
                            </q-expansion-item>
                            <q-separator inset />
                            <q-expansion-item :disable="!item.DT_remark.length>0">
                                <template v-slot:header>

                                    <q-item-section>
                                        动画特效
                                    </q-item-section>

                                    <q-item-section side>
                                        {{ item.DT }}.00
                                    </q-item-section>
                                </template>

                                <q-card>
                                  <q-card-section class="q-pt-none  row wrap ">
                                    <div class="q-pa-sm bg-blue-1 full-width text-caption text-weight-light row text-wrap" style="border-radius:10px;">

                                          <div style="max-width:250px;white-space:pre-line">
                                            {{ item.DT_remark }}
                                          </div>


                                    </div>
                                </q-card-section>

                                </q-card>
                            </q-expansion-item>
                            <q-separator inset />
                            <q-expansion-item :disable="!item.PY_remark.length>0">
                                <template v-slot:header>

                                    <q-item-section>
                                        配音费
                                    </q-item-section>

                                    <q-item-section side>
                                        {{ item.PY }}.00
                                    </q-item-section>
                                </template>

                                <q-card>
                                  <q-card-section class="q-pt-none  row wrap ">
                                    <div class="q-pa-sm bg-blue-1 full-width text-caption text-weight-light row text-wrap" style="border-radius:10px;">

                                          <div style="max-width:250px;white-space:pre-line">
                                            {{ item.PY_remark }}
                                          </div>


                                    </div>
                                </q-card-section>

                                </q-card>
                            </q-expansion-item>
                            <q-separator inset />

                        </q-card>
                    </q-expansion-item>

                </q-card-section>
                <q-card-section class="q-py-sm">
                    <q-expansion-item default-opened header-class="q-pa-none" class="q-pa-none">
                        <template v-slot:header>
                            <tips-title class="full-width" title="其他" tipclass="bg-cyan-6" lineColor="cyan-6" :isCaption="true" :capTitle="'合计：￥ '+item.vatTotal+'.00'" capClass="text-cyan-6 text-bold"></tips-title>
                        </template>
                        <q-card class=" q-px-sm">
                            <q-expansion-item disable>
                                <template v-slot:header>

                                    <q-item-section>
                                        增值税{{item.vat}}%
                                    </q-item-section>

                                    <q-item-section side>
                                        {{ item.vatTotal }}.00
                                    </q-item-section>
                                </template>

                                <q-card>
                                    <q-card-section class="q-pt-none  ">
                                        <div class="q-pa-sm bg-blue-1 text-caption full-width  text-weight-light" style="border-radius:10px">

                                        </div>
                                    </q-card-section>
                                </q-card>
                            </q-expansion-item>
                            <q-separator inset />

                        </q-card>
                    </q-expansion-item>

                </q-card-section>

            </q-card>

        </q-expansion-item>
        <q-card-section class="row justify-end text-subtitle1 text-bold text-teal-6 ">
            合计：￥ {{ item.costTotal }}.00
        </q-card-section>

    </q-card>

    <q-card v-show="!isLoading" style="border-radius:10px" class="q-my-md shadow-12">
        <q-card-section>
            <q-list separator class="q-my-xs" style="border-radius:10px">
                <q-item clickable v-ripple class="q-pa-none row flex-center no-wrap">
                    <div class="col-4  column q-px-md " :class="titleClass">
                        <span class="text-body2">供应商：</span>
                        <span class="text-caption text-weight-light">Vendor</span>
                    </div>
                    <div class="col-grow row flex-center">
                        <span>武汉一方映画文化传媒有限公司</span>

                    </div>

                </q-item>
                <q-item clickable v-ripple class="q-pa-none row flex-center no-wrap">
                  <div class="col-4  column q-px-md " :class="titleClass">
                      <span class="text-body2">邮箱：</span>
                      <span class="text-caption text-weight-light">E-Mail</span>
                  </div>
                  <div class="col-grow row flex-center">
                      <!-- <span>main@yfyh.cc</span> -->
                      <a href="mailto:main@yfyh.cc">main@yfyh.cc</a>
                  </div>

              </q-item>
                <q-item clickable v-ripple class="q-pa-none row flex-center no-wrap">
                    <div class="col-4  column q-px-md" :class="titleClass">
                        <span class="text-body2">报价人：</span>
                        <span class="text-caption text-weight-light">Content</span>
                    </div>
                    <div class="col-grow row flex-center">
                        <span @click="handlePhone">徐文涛17371251725</span>

                    </div>

                </q-item>
                <q-item clickable v-ripple class="q-pa-none row flex-center no-wrap">
                    <div class="col-4  column q-px-md " :class="titleClass">
                        <span class="text-body2">日期：</span>
                        <span class="text-caption text-weight-light">Date</span>
                    </div>
                    <div class="col-grow row flex-center">
                        <span>{{qTime}}</span>

                    </div>

                </q-item>
                <q-item clickable v-ripple class="q-pa-none row flex-center no-wrap">
                  <div class="col-4  column q-px-md " :class="titleClass">
                      <span class="text-body2">发票：</span>
                      <span class="text-caption text-weight-light">Invoice</span>
                  </div>
                  <div class="col-grow row flex-center">
                      <span>可开具发票</span>

                  </div>

              </q-item>

            </q-list>
        </q-card-section>

    </q-card>
    </div>


    <q-inner-loading :showing="isLoading">
        <q-spinner-cube color="primary" size="50px" class="q-mb-sm" />
        数据加载中……
    </q-inner-loading>
</q-page>
</template>

<script>
import {
    loadQuoteInfo
} from "assets/api/app"
export default {
    name: '',
    data() {
        return {
            titleClass: "",
            q_id: '',
            quoteInfoList: [],
            qTime: 0,
            isLoading: true

        }
    },
    mounted() {
        let q_id = this.$route.params.q_id;
        this.q_id = q_id
        this.handleLoadQuoteInfo()
    },
    methods: {
        handleLoadQuoteInfo() {
            loadQuoteInfo({
                q_id: this.q_id
            }).then(res => {
                console.log(res.data.data);
                let data = res.data.data;
                if (data.length > 0) {
                    this.qTime = this.$moment(data[0][0].qTime, 'x').format("YYYY/MM/DD")
                    this.stime = this.$moment(data[0][0].stime, 'x').format("YYYY/MM/DD")
                    this.etime = this.$moment(data[0][0].etime, 'x').format("YYYY/MM/DD")
                    this.quoteInfoList = data[1]
                    this.isLoading = false
                } else {

                }

            })
        },
        handlePhone(){
          window.location.href = "tel:17371251725";
        }
    }
}
</script>

<style>

</style>
